<template>
  <div class="app-container">
    <MyHeader title="购物车"></MyHeader>
    <MyGoods :goods="item" v-for="item in list" :key="item.id"></MyGoods>
    <MyFooter :list="list"></MyFooter>
  </div>
</template>

<script>
//目标1:自定义头部-props 限制条件
//1.1 在Myheader.vue中定义 props,props 是一个对象，加入限制条件
//1.2 在子组件中使用定义的数据
//1.3 在 App.vue 中给 MyHeader.vue 传入指定的数据

//目标2：发送请求获取数据
//2.1 下载axios  导入main.js
//2.2 配置基地址
//2.3将 axios 挂载到Vue的原型上
//2.4 在App.vue 的created 中使用 this.$axios 发请求   /api/cart

//目标3:渲染数据
//3.1 将获取到的数据保存到 data 中
//3.2使用 v-for 循环创建组件
//3.3 将循环的商品对象传入子组件 MyGoods.vue 中
//3.4 子组件中渲染数据

//目标4:勾选状态
//4.1 在MyGoods.vue 中将 goods.goods_state与checkbox 进行双向绑定
//4.2 给checkbox 动态绑定 id 为 goods.id
//4.3 给；label 动态绑定 for 为 goods.id

//目标5：数量处理
//5.1 在MyGoods.vue中将goods 传递给 MyCount.vue
//5.2 在MyCount.vue 中使用 v-model 绑定数量给文本框
//5.3 处理加号和减号按钮的自增自减
//5.4 使用 watch 进行侦听处理越界的情况

// 目标6: 1.全选
// 1. v-model关联全选-复选框(v-model后变量计算属性)
// 2. 页面(视频层)v(true) -> 数据层(变量-) 计算属性(完整写法)
// 3. 把全选 true/false同步给所有小选框选中状态上

// 2.小选  -> 全选
// App.vue里list数组 -> MyFooter.vue
// isAll的get方法里, 统计状态影响全选框

// 目标7: 总数量统计
// 1. allCount计算属性用 数组reduce+判断统计数量并返回

// 目标8: 总价
// allPrice计算属性, 数组reduce+单价*数量, 判断选中, 才累加后返回

import MyHeader from './components/MyHeader.vue'
import MyGoods from './components/MyGoods.vue'
import MyFooter from './components/MyFooter.vue'

export default {
  components: {
    MyHeader,
    MyGoods,
    MyFooter
  },

  data () {
    return {
      list: []
    }
  },
  async created () {
    // console.log(this);
    // this.$axios.get('/api/cart')
    //  .then(res=>{
    //    console.log(res);
    //  })
    let res = await this.$axios.get('/api/cart')
    //  console.log(res.data.list);
    this.list = res.data.list
  },
  mounted () {},

  methods: {}
}
</script>

<style lang="less" scoped>
.app-container {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>
